<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">

    <title>悦读-学生端登录</title>
    <link rel="stylesheet" th:href="@{/css/menu.css}" >
    <style>

        a:link{
            text-decoration: none;
            color:#BACCD9;
        }
        a:visited{
            text-decoration: none;
            color:#BACCD9;
        }
        a:hover{
            text-decoration: none;
            color:#FFFFFF;
        }
        .menu{
            background-color: #EC8AA4;/*中国传统报春色*/
            display: flex;
            justify-content: space-between;
            height:60px;
            border-radius: 5px;
        }
        /*测试背景 body {
          background-color: #f0f0f0;
        }*/

        .menu .menur ul{
            color:#E4DFD7;/*中国传统珍珠色*/
            list-style: none;
            display:flex;
            height: 30px;
        }
        .menu .menur ul li{
            font-size: 12px;
            display:flex;
            align-items: center;
            margin:0 25px;
            cursor:pointer;
        }
        .menu .menur ul li:hover{
            color:#FFFFFF;
        }

    </style>
    <style type="text/css">
        .yd{
            font-size: 30px;
            font-weight: 888;
            letter-spacing:3px;
            position: absolute;
            margin-left:20px;
            margin-top: 10px;
            color:#E4DFD7;/*中国传统珍珠色*/
            cursor: default;
        }
        .ydds{
            font-size: 30px;
            font-weight: 888;
            letter-spacing:3px;
            position: absolute;
            margin-left:150px;
            margin-top: 10px;
            color:#E4DFD7;/*中国传统珍珠色*/
            cursor: default;
        }
        .logo{
            position: absolute;
            margin-left:48%;
            margin-top: 130px;
        }
        .img1{
            border-radius: 10px;
        }

        .dl{
            font-size: 30px;
            font-weight: 888;
            letter-spacing:2px;
            position: absolute;
            margin-left:44%;
            margin-top: 240px;
            color:#BABCD1;/*传统秋波色*/3
        }
        .login{
            position: absolute;
            margin-top: 333px;
            margin-left: 42%;
        }
        .user{
            display:flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 8px;
            border:solid 3px #E0E0E0;
            width:255px;
            height:42px;
        }
        .user input{
            width:240px;
            height:40px;
            font-size: 15px;
            margin-left: 10px;
            border:none;
            outline: none;
        }
        .pswd{
            margin-top: 10px;
            display:flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 8px;
            border:solid 3px #E0E0E0;
            width:255px;
            height:42px;
        }
        .pswd input{
            width:240px;
            height:40px;
            font-size: 15px;
            margin-left: 10px;
            border:none;
            outline: none;
        }
        .other ul{
            list-style: none;
            display:flex;
            margin: 10px -110px;
            font-size: 10px;
            height: 20px;
        }
        .other ul li{
            margin: 0 77px;
            cursor: pointer;
            color:#EC8AA4;/*中国传统报春色*/
        }
        .sub input{
            width:240px;
            height: 40px;
            color: #E8EAED;/*传统浅云色*/
            position: absolute;
            margin-top: 24px;
            margin-left: 10px;
            border:none;
            border-radius: 8px;
            background-color: #EC8AA4;/*中国传统报春色*/
            cursor:pointer;
        }
    </style>
</head>



<body>
<div class="menu">
    <div class="menul">
        <p class="yd">YueDu</p>
        <p class="ydds">悦读读书管理系统</p>
    </div>
    <div class="menur">
        <ul>
            <li onclick="window.location.href='/user/register'"><a>注册</a></li>
            <li onclick="goBack()">返回</li>
        </ul>
    </div>
</div>

<div class="jiemian">
    <div class="logo">
        <img class="img1" th:src="@{/img/YueDu.png}" alt="" width="72" height="72" ></div>
    <p class="dl">悦读账号登录</p>
</div>
<div class="login" >
    <form  th:action="@{/user/login}">
        <div class="user">
            <input name="userName" type="text" th:placeholder="请输入手机号码或邮箱"  required autofocus="">
        </div>
        <div class="pswd">
            <input name="password" type="password" th:placeholder="请输入密码" required>
        </div>
        <div class="other">
            <ul>
                <li th:onclick="window.location.href='/teacher-login'"><a>切换教师端</a></li>
                <li onclick="window.location.href='/user/register'"><a>注册账号</a></li>
            </ul>
        </div>
        <div class="sub">
            <input type="submit" value="登录" />
        </div>
    </form>
</div>
</body>
<script>
    function goBack() {
        window.history.go(-1);
    }
</script>
</html>
